<template>
  <div class="swiper">
    <!-- @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd" -->
    <div
      class="swiper-container"
      ref="swiperContainer"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      :style="{ transform: `translateX(${x}px)` }"
    >
      <div
        class="swiper-slide slide"
        v-for="(item, index) in slides"
        :key="index"
        :style="{ transform: `translateX(${currentIndex * -100}%)` }"
      >
        <!-- <img :src="item.src" alt="" style="max-height: 100%" /> -->
        <video
          :id="'myVideo'+index"
          :src="item.src"
          autoplay
          muted
          playsinline
          controls
          @ended="onVideoEnded"
        ></video>
        <div
          style="
            border: 1px solid red;
            height: 100px;
            width: 100%;
            margin-top: 5px;
          "
        >
          {{ 'myVideo'+index }}
        </div>
      </div>
    </div>
    <div class="flex w-full justify-between items-center mt-[10px]">
      <div class="w-4 h-8 flex justify-center items-center" @click="leftChange">
        <
      </div>
      <!-- 分页器 -->
      <div class="pagination w-full">
        <span
          v-for="(slide, index) in slides"
          :key="index"
          :class="['dot', { active: index <= currentIndex }]"
          @click="goToSlide(index)"
        ></span>
      </div>
      <div
        class="w-4 h-8 flex justify-center items-center"
        @click="rightChange"
      >
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // slides: [
      //   {
      //     src: "https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg",
      //     text: "1",
      //   },
      //   {
      //     src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦动态@2x (3).png",
      //     text: "2",
      //   },
      //   {
      //     src: "https://100000063-1252208446.file.myqcloud.com/images/01.jpg",
      //     text: "3",
      //   },
      //   {
      //     src: "https://100000063-1252208446.file.myqcloud.com/images/shear–celeste B@2x.png",
      //     text: "4",
      //   },
      //   {
      //     src: "https://100000063-1252208446.file.myqcloud.com/images/限定发售-图片@2x (1).png",
      //     text: "5",
      //   },
      //   {
      //     src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦珍稀年份系列@2x (1).png",
      //     text: "6",
      //   },
      //   {
      //     src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦传奇系列@2x.png",
      //     text: "7",
      //   },
      // ],
      slides: [
        {
          src: "../../public/sintel.mp4",
          text: "1",
        },
        {
          src: "../../public/sintel.mp4",
          text: "2",
        },
        {
          src: "../../public/sintel.mp4",
          text: "3",
        },
        {
          src: "../../public/sintel.mp4",
          text: "4",
        },
         {
          src: "../../public/sintel.mp4",
          text: "5",
        },
         {
          src: "../../public/sintel.mp4",
          text: "6",
        },
      ],
      currentIndex: 0,
      startX: 0,
      deltaX: 0,
      isDragging: false,
      containerWidth: 0,
      x: 0,
      videoSrc: "../../public/sintel.mp4",
      video: null,
    };
  },
  mounted() {
    // 获取 video 元素
    var video = document.getElementById("myVideo0 ");
    console.log(video, "ooooooooooooooooo");
    // 监听 timeupdate 事件来获取实时的播放进度
    video.addEventListener("timeupdate", function () {
      // 计算当前播放进度百分比
      var progressPercent = (video.currentTime / video.duration) * 100;

      // 输出或使用这个百分比值
      console.log("当前播放进度: " + progressPercent.toFixed(2) + "%");
    });
    this.video = video;
  },
  methods: {
    touchStart(event) {
      this.startX = event.touches[0].clientX;
    },
    touchMove(event) {
      this.deltaX = event.touches[0].clientX - this.startX;
      if (this.deltaX < 300 && this.deltaX > -300) {
        this.x = this.deltaX;
      }
    },
    touchEnd() {
      this.removeEventListener();
      this.x = 0;
      this.handleSwipe();
    },
    mouseDown(event) {
      this.startX = event.clientX;
      this.isDragging = true;
    },
    mouseMove(event) {
      if (this.isDragging) {
        this.deltaX = event.clientX - this.startX;
        this.handleSwipe();
      }
    },
    mouseUp() {
      if (this.isDragging) {
        this.handleSwipe();
        this.isDragging = false;
      }
    },
    handleSwipe() {
      if (this.deltaX > 50 && this.currentIndex > 0) {
        this.currentIndex--;
      } else if (
        this.deltaX < -50 &&
        this.currentIndex < this.slides.length - 1
      ) {
        this.currentIndex++;
      }
      this.deltaX = 0;
    },
    goToSlide(index) {
      this.currentIndex = index;
    },
    leftChange() {
      if (this.currentIndex <= 0) return;
      this.currentIndex--;
    },
    rightChange() {
      this.removeEventListener();
      if (this.currentIndex >= this.slides.length - 1) return;
      this.currentIndex++;
    },
    onVideoEnded() {
      if (this.currentIndex >= this.slides.length - 1) return;
      this.currentIndex++;
    },
    removeEventListener() {
      console.log(this.video, "removeEventListener");
      // 移除事件监听器
      this.video.removeEventListener("timeupdate", () => {});
    },
  },
};
</script>

<style scoped>
.swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.swiper-container {
  display: flex;
  /* transition: transform 0.3s ease-in-out; */
  width: 100%;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}

.pagination {
  display: flex;
  justify-content: center;
}

.dot {
  width: 100%;
  height: 5px;
  background-color: #000;
  border-radius: 5px;
  margin: 0 3px;
  cursor: pointer;
}

.dot.active {
  background-color: red;
}
</style>
